<template>
  <div class="navBox" ref="navBox">
    <div class="navlogo">
      <!-- <i class="el-icon-s-tools" v-if="!isCollapse"></i> -->
      <transition name="fade" v-if="showText">
        <span style="width: 100%;text-align: center;display: block;" v-if="showText">管理后台</span>
      </transition>
      <i :class="isCollapse ? 'el-icon-s-unfold zhankai' : 'el-icon-s-fold'" class="shouqi" @click="onmenuclick"></i>
    </div>
    <div class="bndu31h401" v-if="showText">
      <div class="jnu2h321803u">
        <img src="@/assets/zz11.png" style="width: 45px;height: 45px;border-radius: 50%;" alt="">
      </div>
      <div class="nfuwqh72y30yhd">
        <div class="admintxt">{{ admin_name }}</div>
        <div class="nduqiwhd2183hgh">
          <div class="nueg1728eyhg"></div>
          <div class="nbd7qye20981yhgiqw">Online</div>
        </div>
      </div>
    </div>
    <!-- <div style="width: 217px;background-color: #222d32;padding-left: 10px;" v-if="showText">
      <el-autocomplete v-model="search" style="background-color: #374850;" :fetch-suggestions="querySearch"
        placeholder="搜索菜单" prefix-icon="el-icon-search" @select="handleSelect" clearable />
    </div> -->
    <el-menu ref="nav" :default-active="defaultActive" class="el-menu-vertical-demo custom-menu" @open="handleOpen"
      @close="handleClose" :collapse="isCollapse" background-color="#222d32" @select="clickNva" text-color="#b8c7ce">
      <template v-for="item in menuData">
        <!-- 一级菜单项 (无子菜单) -->
        <el-menu-item v-if="!item.children || item.children.length === 0" :key="item.id" :index="String(item.id)"
          class="level-1-menu" @click="clickMenuItem(item)">
          <i :class="getIcon(item)"></i>
          <span>{{ item.name }}</span>
        </el-menu-item>

        <!-- 一级菜单 (有子菜单) -->
        <el-submenu v-else :key="item.id + 10086" :index="String(item.id)" class="level-1-menu">
          <template #title>
            <i :class="getIcon(item)"></i>
            <span>{{ item.name }}</span>
          </template>

          <!-- 二级菜单 -->
          <template v-for="child in item.children">
            <!-- 二级菜单项 (无子菜单) -->
            <el-menu-item v-if="!child.children || child.children.length === 0" :key="child.id" :index="String(child.id)"
              class="level-2-menu" @click="clickMenuItem(child)">

              <svg style="margin-right: 8px;" t="1748509597645" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="7023" width="15" height="15">
                <path
                  d="M512 192a320 320 0 1 0 0 640 320 320 0 1 0 0-640z m448 320a448 448 0 1 1-896 0 448 448 0 1 1 896 0z"
                  p-id="7024" fill="#6c8c9b"></path>
              </svg>
              {{ child.name }}
            </el-menu-item>

            <!-- 二级菜单 (有子菜单) -->
            <el-submenu v-else :key="child.id + 186" :index="String(child.id)" class="level-2-submenu">
              <template #title>{{ child.name }}</template>

              <!-- 三级菜单项 -->
              <el-menu-item v-for="grandChild in child.children" :key="grandChild.id" :index="String(grandChild.id)"
                class="level-3-menu" @click="clickMenuItem(grandChild)">
                {{ grandChild.name }}
              </el-menu-item>
            </el-submenu>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
// import { menu, permissions } from "../../utils/api";
import { menuBar } from "../../utils/api";
export default {
  name: "navInfo",
  data() {
    return {
      admin_name: '',
      isCollapse: false,
      showText: true,
      classType: "el-icon-arrow-right",
      menuData: [
        // {
        //   id: 1,
        //   name: '首页',
        //   icon: 'el-icon-s-home',
        //   children: []
        // },
        // {
        //   id: 2,
        //   name: '管理员管理',
        //   icon: 'el-icon-user',
        //   children: [
        //     {
        //       id: 21,
        //       name: '用户列表',
        //       icon: '',
        //       children: []
        //     },
        //     {
        //       id: 22,
        //       name: '用户分组列表',
        //       icon: '',
        //       children: []
        //     }
        //   ]
        // },
        // {
        //   id: 3,
        //   name: '系统设置',
        //   icon: 'el-icon-setting',
        //   children: [
        //     {
        //       id: 31,
        //       name: '基本设置',
        //       icon: '',
        //       children: []
        //     },
        //     {
        //       id: 32,
        //       name: '高级配置',
        //       icon: '',
        //       children: []
        //     }
        //   ]
        // },
        // {
        //   id: 4,
        //   name: '关于我们',
        //   icon: 'el-icon-info',
        //   children: []
        // }
      ],
      // defaultActive: '', // 设置默认激活项
      menuItem: [{ name: "首页", path: "welcome", id: 1 }],
      search: '',
      suggestions: [
        { value: '苹果' },
        { value: '香蕉' },
        { value: '橘子' },
        { value: '葡萄' },
        { value: '西瓜' },
        { value: '芒果' },
      ],

    };
  },
  props: {
    userData: {
      required: true,
    },
    defaultActive: {
      required: true,
    }
  },

  created() {
    const userStr = localStorage.getItem('user');

    try {
      const user = JSON.parse(userStr);
      this.admin_name = user?.admin_name || 'admin'; // 使用可选链和默认值
    }
    catch {
      this.admin_name = 'admin';
    }
    // this.defaultActive = localStorage.getItem('menu') || '1-2'
    // this.defaultActive = ''
    // localStorage.setItem('menuList',JSON.stringify(this.menuItem))
  },
  mounted() {
    this.getMenu()
    // this.closeOtherMenus(this.defaultActive);
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.suggestions.filter(item =>
          item.value.toLowerCase().includes(queryString.toLowerCase())
        )
        : this.suggestions;
      cb(results);
    },
    handleSelect(item) {
      this.$message({
        message: `你选择了：${item.value}`,
        type: 'success',
      });
    },







    onmenuclick() {

      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.showText = false;  // 折叠时隐藏文本
      } else {
        // 展开时，延迟一秒再显示文本
        setTimeout(() => {
          this.showText = true;
        }, 500); // 延迟一秒后显示文本
      }
    },
    // closeOtherMenus(activeIndex) {

    //   const allSubmenus = this.$refs.nav.$children.filter(item => item.$options.name === 'ElSubmenu');

    //   allSubmenus.forEach(submenu => {
    //     if (submenu.index !== activeIndex) {
    //       submenu.$emit('close');
    //     }
    //   });
    // },
    getIcon(item) {
      // 主导航图标筛选
      const iconMap = new Map([
        [1, 'el-icon-user-solid'],  // 1.管理员
        [11, 'el-icon-user'],  // 11.用户
        [66, 'el-icon-notebook-2'],  // 66.股票
        [86, 'el-icon-s-finance'],  // 86.OTC
        [101, 'el-icon-coin'],  // 101.充值
        [136, 'el-icon-document-add'],  // 1.IPO
        [116, 'el-icon-sell'],  // 116.提现
        [26, 'el-icon-medal'],  // 26.积分
        [156, 'el-icon-news'],  // 156.新闻
        [81, 'el-icon-menu'],  // 81.菜单
        [126, 'el-icon-data-line'],  // 126.理财
        [121, 'el-icon-s-tools'],  // 121.系统
        [71, 'el-icon-files'],  // 71.持仓
        [76, 'el-icon-printer'],  // 76.模块

      ]);
      return iconMap.get(item.id) || 'el-icon-s-grid'; // 默认图标
    },
    handleOpen() {
    },
    handleClose() {
    },
    clickNva() {
    },
    clickMenuItem(item2) {
      this.$emit("child-clicked", item2);
      if (JSON.parse(localStorage.getItem('menuList'))) {
        this.menuItem = JSON.parse(localStorage.getItem('menuList'))
      }

      // 使用 some 方法检查是否存在相同的 id
      var canAdd = !this.menuItem.some(item => item.id === item2.id);
      var isUnique = true
      if (canAdd) {
        // 如果没有发现相同的 id，则将 obj 添加到 data 数组中
        this.menuItem.push(item2);
      } else {
        isUnique = false

      }

      if (this.menuItem.length > 7) {
        // 提取第一个元素
        var firstElement = this.menuItem.slice(0, 1);
        // 从数组末尾开始截取7个元素
        var lastSevenElements = this.menuItem.slice(-6);
        // 合并两个数组
        this.menuItem = firstElement.concat(lastSevenElements);

      }
      this.$emit("set-Header", this.menuItem, isUnique)

    },
    async getMenu() {
      const res = await menuBar().catch(err => {
        return console.error(err)
      })
      if (res.data && res.data.code == '200') {
        // this.$message.success(res.data.message)
        this.menuData = res.data.data
      } else {
        this.$message.error(res.data.message)
      }
    }
  },
};
</script>
<style lang="less">
.el-input__prefix {
  left: inherit !important;
  right: 5px;

}

// .el-input--prefix .el-input__inner {
//   background-color: #374850;
//   border: none;
//   color: #fff;
// }
</style>
<style lang="less" scoped>
.caidan {
  // text-align: right;
  padding-left: 60px !important;
}

.navBox {
  background-color: #222d32;
  height: 100vh;
  line-height: 0;
  overflow-y: auto;
  // width: 220px;

  .bndu31h401 {
    width: 100%;
    height: 80px;
    display: flex;
    padding-left: 27px;
    align-items: center;

    .jnu2h321803u {
      width: 45px;
    }

    .nfuwqh72y30yhd {
      // flex: 1;
      line-height: 23px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: start;
      padding-left: 10px;

      .admintxt {
        color: #fff;
        font-weight: 700;
        font-size: 15px;
      }

      .nduqiwhd2183hgh {
        display: flex;
        align-items: center;

        .nueg1728eyhg {
          background-color: #18bc9c;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-right: 5px;
        }

        .nbd7qye20981yhgiqw {
          color: #fff;
          font-weight: 500;
          font-size: 14px;
        }
      }
    }

    svg {
      border-radius: 50%;
    }
  }

  .navlogo {
    width: 100%;
    height: 50px;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
    font-weight: 300;
    position: relative;
    text-align: left;
    // padding-left: 27px;
    padding-top: 5px;
    // padding-bottom: 5px;
  }

  .Collapse {
    position: absolute;
    left: 0;
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    width: 65px;
  }

  .custom-button:hover {
    background: linear-gradient(to right, #ff4b2b, #ff7f50);
  }
}

.navBox::-webkit-scrollbar {
  display: none;
  /* Chrome / Safari / Edge */
}
</style>
<style>
/* 使用 transform 和 opacity 混合过渡 */
.fade-enter-active {
  transition: transform 0.1s ease, opacity 0.1s ease;
}

.fade-enter,
.fade-leave-to {
  transform: translateY(100px);
  /* 先将元素移出可见区域 */
  opacity: 0;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.el-menu-item-group__title {
  display: none !important;
}

.el-table__header-wrapper {
  line-height: 0;
}

.custom-menu {
  justify-content: flex-start;
  width: 220px;
  /* 内容左对齐 */
}

.el-menu {
  border: none !important;
}

.el-menu-item {
  text-align: left;
  display: flex;
  align-items: center;
}

.el-submenu .el-menu-item:hover {
  background-color: #181f23 !important;
  color: #fff !important;
}

.el-submenu__title {
  color: #b8c7ce !important;
  text-align: left;
  padding-left: 80px;
}

.level-3-menu el-submenu el-menu {
  font-size: 40px !important;
}

.zhankai {
  left: 70px !important;
}

.shouqi {
  font-size: 25px;
  position: fixed;
  color: #222d32;
  left: 235px;
  top: 25px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1000;

}
</style>
